import { useState } from 'react';
import { 
    Box, 
    Button, 
    Typography, 
    Paper,
    Grid,
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    TextField,
    IconButton,
    Tooltip,
    Alert
} from '@mui/material';
import ToolPageTemplate from '@/components/ToolPageTemplate';
import FingerprintIcon from '@mui/icons-material/Fingerprint';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import RefreshIcon from '@mui/icons-material/Refresh';

const UUIDPage = () => {
    const [version, setVersion] = useState('4');
    const [count, setCount] = useState(1);
    const [uuids, setUuids] = useState<string[]>([]);
    const [copied, setCopied] = useState(false);

    const generateUUID = () => {
        const newUuids = [];
        for (let i = 0; i < count; i++) {
            newUuids.push(crypto.randomUUID());
        }
        setUuids(newUuids);
    };

    const copyToClipboard = (text: string) => {
        navigator.clipboard.writeText(text);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    const copyAllUUIDs = () => {
        navigator.clipboard.writeText(uuids.join('\n'));
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    return (
        <ToolPageTemplate 
            title="UUID生成器"
            description="生成全球唯一标识符，支持多种版本格式"
            category="生成器"
            categoryColor="#1565c0"
        >
            <Grid container spacing={4}>
                <Grid item xs={12} md={4}>
                    <Box sx={{ mb: 3 }}>
                        <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
                            生成设置
                        </Typography>
                        
                        <FormControl fullWidth sx={{ mb: 3 }}>
                            <InputLabel>UUID版本</InputLabel>
                            <Select
                                value={version}
                                label="UUID版本"
                                onChange={(e) => setVersion(e.target.value)}
                            >
                                <MenuItem value="1">版本1 (时间戳)</MenuItem>
                                <MenuItem value="4">版本4 (随机)</MenuItem>
                                <MenuItem value="5">版本5 (命名空间)</MenuItem>
                            </Select>
                        </FormControl>

                        <TextField
                            fullWidth
                            type="number"
                            label="生成数量"
                            value={count}
                            onChange={(e) => setCount(Math.max(1, Math.min(100, parseInt(e.target.value) || 1)))}
                            inputProps={{ min: 1, max: 100 }}
                            sx={{ mb: 3 }}
                        />

                        <Button 
                            variant="contained" 
                            size="large"
                            startIcon={<FingerprintIcon />}
                            onClick={generateUUID}
                            fullWidth
                            sx={{ mb: 2 }}
                        >
                            生成UUID
                        </Button>

                        {uuids.length > 0 && (
                            <Button 
                                variant="outlined" 
                                size="large"
                                startIcon={<ContentCopyIcon />}
                                onClick={copyAllUUIDs}
                                fullWidth
                            >
                                复制全部
                            </Button>
                        )}
                    </Box>
                </Grid>

                <Grid item xs={12} md={8}>
                    <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <Typography variant="h6" sx={{ fontWeight: 600 }}>
                            生成结果
                        </Typography>
                        {uuids.length > 0 && (
                            <Tooltip title="重新生成">
                                <IconButton onClick={generateUUID}>
                                    <RefreshIcon />
                                </IconButton>
                            </Tooltip>
                        )}
                    </Box>

                    {copied && (
                        <Alert severity="success" sx={{ mb: 2 }}>
                            UUID已复制到剪贴板
                        </Alert>
                    )}

                    {uuids.length > 0 ? (
                        <Paper elevation={0} sx={{ p: 2, bgcolor: 'grey.50', maxHeight: 400, overflow: 'auto' }}>
                            {uuids.map((uuid, index) => (
                                <Box 
                                    key={index}
                                    sx={{ 
                                        display: 'flex', 
                                        alignItems: 'center', 
                                        justifyContent: 'space-between',
                                        p: 2,
                                        mb: 1,
                                        bgcolor: 'white',
                                        borderRadius: 1,
                                        border: '1px solid',
                                        borderColor: 'grey.200'
                                    }}
                                >
                                    <Typography 
                                        variant="body2" 
                                        component="code"
                                        sx={{ 
                                            fontFamily: 'monospace',
                                            flex: 1,
                                            mr: 2,
                                            wordBreak: 'break-all'
                                        }}
                                    >
                                        {uuid}
                                    </Typography>
                                    <Tooltip title="复制">
                                        <IconButton 
                                            size="small" 
                                            onClick={() => copyToClipboard(uuid)}
                                        >
                                            <ContentCopyIcon fontSize="small" />
                                        </IconButton>
                                    </Tooltip>
                                </Box>
                            ))}
                        </Paper>
                    ) : (
                        <Paper 
                            elevation={0}
                            sx={{ 
                                p: 4, 
                                textAlign: 'center',
                                bgcolor: 'grey.50',
                                minHeight: 200,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                border: '2px dashed',
                                borderColor: 'grey.300'
                            }}
                        >
                            <Box>
                                <FingerprintIcon sx={{ fontSize: 60, color: 'grey.400', mb: 2 }} />
                                <Typography variant="body1" color="text.secondary">
                                    点击生成按钮创建UUID
                                </Typography>
                            </Box>
                        </Paper>
                    )}
                </Grid>
            </Grid>
        </ToolPageTemplate>
    );
};

export default UUIDPage;